<link href="../../static/css/jeDate-test.css" rel="stylesheet" th:href="@{/css/jeDate-test.css}"/>
<link href="../../static/css/jedate.css" rel="stylesheet" th:href="@{/css/jedate.css}"/>
<script src="../../static/js/jquery.jedate.js" th:src="@{/js/jquery.jedate.js}"></script>
<script src="../../static/js/jedate-test.js" th:src="@{/js/jedate-test.js}"></script>
<div class="panel panel-default">
    <!--<div class="panel-heading">-->
      <!---->
    <!--</div>-->
    <div class="panel-body">
        <div class="form-group col-md-12">
            <div class="col-md-2"> <h4 class="panel-title">用户管理</h4></div>
            <div class="col-md-10">

                <button type="button" class="btn btn-primary pull-right" data-toggle="modal" data-target=".bs-example-modal-static">添加</button>
            </div>
        </div>
    </div>
</div>
<div class="panel panel-default">
    <div class="panel-body">
    <div class="table-responsive">
        <table class="table table-striped table-hover mb30">
            <thead>
            <tr>
                <th class="column-title">用户名</th>
                <th class="column-title">密码</th>
                <th class="column-title">添加时间</th>
                <th class="column-title">操作</th>
            </tr>
            </thead>
            <tbody>
            <tr th:each="data,iterStat : ${datas.content}">
                <td th:text="${data.username}">用户名</td>
                <td>******</td>
                <td th:text="${data.createtime}">添加时间</td>

                <td th:if="${data.username != 'admin'}and${data.id != user.id} ">
                    <button type="button" th:name="${data.id}"
                            class="btn btn-danger" onclick="Reset(this)">重置密码
                    </button>&middot;
                    <button type="button" th:name="${data.id}"
                            class="btn btn-danger" onclick="dele(this)">删除
                    </button>&middot;
                    <button type="button" th:name="${data.id}"
                            class="btn btn-primary" onclick="edit(this)">修改
                    </button>
                </td>
                <td th:if="${data.username eq 'admin'} or ${data.id eq user.id}">
                    <button type="button" th:name="${data.id}" disabled
                            class="btn btn-danger" onclick="dele(this)">删除
                    </button>&middot;
                    <button type="button" th:name="${data.id}" th:if="${data.username eq 'admin'} and ${user.username != 'admin'}" disabled
                            class="btn btn-primary"  onclick="edit(this)">修改
                    </button>
                    <button type="button" th:name="${data.id}" th:if="${data.username != 'admin'} "
                            class="btn btn-primary"  onclick="edit(this)">修改
                    </button>
                    <button type="button" th:name="${data.id}" th:if="${user.username eq 'admin'} "
                            class="btn btn-primary"  onclick="edit(this)">修改
                    </button>
                </td>
            </tr>
            </tbody>
        </table>
        <div id="pagination" class="col-md-12 pagination" th:replace="pagination :: pagination">
        </div>
    </div>
    </div>
</div>





<!--用户管理-添加-->
<div class="modal fade bs-example-modal-static" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel"
     data-backdrop="static" aria-hidden="true" style="display: none;" id="user_add">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button aria-hidden="true" data-dismiss="modal" class="close" type="button">×</button>
                <h4 class="modal-title">用户管理--添加</h4>
            </div>
            <div class="modal-body">
                <form method="post" id="saveUser">
                    <div class="form-group">用户名：</div>
                    <input type="text" class="form-control" style="margin-top: 20px" name="username" id="username_add">
                    <div class="form-group">密码：</div>
                    <input type="text" class="form-control" style="margin-top: 20px" name="password" id="password_add" value="123456">
                    <div class="form-group">角色：</div>
                    <!--<input type="text" class="form-control" style="margin-top: 20px" name="roleId" id="roleId_add">-->
                    <select  class="form-control" placeholder="角色" style="width: 100%;height: 100%;" name="roleId" id="roleId_add">
                        <option value="">--请选择--</option>
                    <option th:each="data,iterStat : ${role}" th:value="${data.id}" th:text="${data.name}"></option>
                    </select>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" onclick="saveUser()">保存</button>
                <button type="button" class="btn btn-default"  data-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>
<!--用户管理-添加-->

<!--用户管理-修改-->
<div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel"
     data-backdrop="static" aria-hidden="true" style="display: none;" id="user_edit">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button aria-hidden="true" data-dismiss="modal" class="close" type="button">×</button>
                <h4 class="modal-title">用户管理--修改</h4>
            </div>
            <div class="modal-body">
                <form method="post" id="updateuser">
                    <input type="hidden" id="id_update" name="id"/>
                    <div class="form-group">用户名：</div>
                    <input type="text" class="form-control" style="margin-top: 20px" name="username" disabled id="username_update">
                    <div class="form-group">密码：</div>
                    <input type="text" class="form-control" style="margin-top: 20px" name="password" id="password_update" >
                    <div class="form-group">角色：</div>
                    <!--<input type="text" class="form-control" style="margin-top: 20px" name="roleId" id="roleId_add">-->
                    <select  class="form-control" placeholder="角色" style="width: 100%;height: 100%;" name="roleId" id="roleId_update">
                    </select>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" onclick="updateUser()">修改</button>
                <button type="button" class="btn btn-default"  data-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>
<!--用户管理-修改-->

<script type="text/javascript" th:inline="javascript">

    var user = [[${user}]];
    console.log("user",user);

    function dele(obj) {//删除一条数据：逻辑删除为不可用状态
//        /*[+
        var id = obj.name
        console.log(id)
        if(window.confirm("执行删除后将无法恢复，确定继续吗？")){
            $.post("user/userOnDelete/", {"id": id}, function (result) {
                alert(result.Message);
                $.goTo("user/toUserPage");
            });
        };
//         +]*/

    }
    function Reset(obj) {//重置一条数据
//        /*[+
        var id = obj.name
        console.log(id)
        if(window.confirm("执行重置后将无法恢复，确定继续吗？")){
            $.post("user/userOnReset/", {"id": id}, function (result) {
                alert(result.Message);
                $.goTo("user/toUserPage");
            });
        };
//         +]*/

    }

    //修改 打开模态框
    function edit(obj) {
        var id = obj.name
        $.get("user/getDateById/" + id, function (result) {
            console.log(result)
            $("#roleId_update").empty();
            $("#id_update").val(result.user.id);
            $("#username_update").val(result.user.username);
            $("#password_update").val(result.user.password);
            var html ="";
            $.each(result.roleId,function (index, item) {
                html+="<option value='"+item.id+"'>"+item.name+"</option>"
            })
            $("#roleId_update").append(html);
        });
        $('#user_edit').modal('show');
    }
    //修改用户信息
    function updateUser() {
        var updateUser = $("#updateuser").serialize();
        $.post("user/userOnUpdate", updateUser, function (result) {
            alert(result.Message);
            $("#id_update").val("");
            $("#username_update").val("");
            $("#password_update").val("");
            $.goTo("user/toUserPage");
        });
        $('#user_edit').modal('hide');
    }
    //添加用户信息
    function saveUser() {
        var saveUser = $("#saveUser").serialize();
        $.post("user/userOnAdd", saveUser, function (result) {
            alert(result.Message);
            $("#username_add").val("");
            $("#password_add").val("123456");
            $("#roleId_add").val("");
            $.goTo("user/toUserPage");
        });
        $('#user_add').modal('hide');
    }
    function up(number) {//分页跳转，上一页
        /*[+
         var findForm = $("#findForm").serialize();
         var number = parseInt(number);
         $.goTo("user/toUserPage?page="+number,findForm);
         +]*/
    }

    function next(number) {//分页跳转，下一页
        /*[+
         var findForm = $("#findForm").serialize();
         var number = parseInt(number) + 2;
         $.goTo("user/toUserPage?page="+number,findForm);
         +]*/
    }
    function pageTo(page) {
        /*[+
         var number = page;
         var findForm = $("#findForm").serialize();
         $.goTo("user/toUserPage?page=" + number,findForm);
         +]*/

    }

</script>